<template>
  <div class='page-container'>
    <h2>组件传值</h2>
    <children1 :list="swiperList" ref="childrenDom" @sendToParent="handleSendToParent"></children1>

    <el-button @click="emitChildrenMethod">触发子组件方法</el-button>


    <div class="brotherContainer">
      <brother1></brother1>
      <brother2></brother2>
    </div>
  </div>
</template>
<script setup lang='ts'>
/**
 * 模块引入
 */
import { reactive, ref, provide } from 'vue';
import children1 from './children1.vue';
import brother1 from './brother1.vue';
import brother2 from './brother2.vue';
/**
 * 数据
 */
// 获取dom的方式 元素标签上定义ref = 值.js里面直接 const 这个值=ref()变成个响应式数据就行
// 第二种方式,可以通过引入getCurrentInstance()解构出来proxy  proxy代表this  proxy.$refs.变量获取

// 父组件调用子组件方法: 子组件中先用defineExpose(dei 烦 诶科思破思)抛出一下.父组件直接调用
let childrenDom = ref<InstanceType<typeof children1> | null>(null);

provide("hahaha", "祖先数据")
const swiperList = reactive({
  title: "轮播图"
});
/**
 * 功能方法
 */

const emitChildrenMethod = function () {
  // 获取DOM 
  // V2  this.$refs.children  this.$refs.children.handleAdd

  // V3  defineExpose   父组件调用子组件的方法.子组件的方法必须用defineExpose抛一下才行
  console.log("   children.value", childrenDom.value)
  if (childrenDom.value) {

    childrenDom.value.handleAdd()
  } else {
    console.error('子组件未正确挂载');
  }

}



const handleSendToParent = function (res) {
  console.log(res, "父组件")
}

</script>
<style lang='scss' scoped>
.page-container {}

.brotherContainer {
  width: 600px;
  height: 200px;
  background-color: #181313;
  color: aliceblue;
}
</style>